<template>

<div class="recharge">

        <div class="header"><van-nav-bar title="USDT" left-text="返回"  @click-left="$router.go(-1)"  :fixed="true"   left-arrow/></div>
        <div  style="width:100%;height:4rem" id="cust_head" class="footer_placeholder"></div>
        
        <div class="myPrice">
            <div>我的资产($)</div>
            <div price>
                <span>{{price1}}</span><br/><span>≈{{price2}}</span>
            </div> 
        </div>
        <div class="priceList">
            <van-tabs v-model="active" >
                <van-tab title="全部">
                    <div class="list">
                        <van-list    :finished="finished"  finished-text="没有更多了"  @load="all_annal"  >
                                <div v-for="(item, index) in  allAnnal"  >
                                        <div class="list_row">
                                            <div v-if="item.type==1">充值</div>
                                            <div v-if="item.type==2">提现</div>
                                            <div v-if="item.type==3">兑换</div>
                                            <div v-html="'USDT:'+base.empty_b(item.number)"></div>
                                            <div v-html="base.formatDate(item.c_time)" style="width:50%"></div>
                                           
                                        </div>
                                </div>
                              
                          </van-list>
                      </div>
                </van-tab>
                <van-tab title="充值">
                     <div class="list">
                     <van-list    :finished="finished"  finished-text="没有更多了"   >
                         <div v-for="(item, index) in  recharge"  >
                                        <div class="list_row">
                                            <div style="width:20%" >充值</div>
                                           
                                            <div  style="width:20%" v-html="'USDT:'+base.empty_b(item.number)"></div>
                                            <div v-html="base.formatDate(item.c_time)" style="width:40%"></div>
                                            <div  style="width:20%"  v-if="item.status==1">未到账</div>
                                            <div  style="width:20%"  v-if="item.status==2">已到账</div>
                                            <div  style="width:20%"  v-if="item.status==3">拒绝通过</div>
                                        </div>
                                </div>
                     </van-list>
                     </div>
                 
                </van-tab>
                <van-tab title="兑换">
                     <div class="list">
                     <van-list    :finished="finished"  finished-text="没有更多了"    >
                         <div v-for="(item, index) in  convert"  >
                                        <div class="list_row">
                                           
                                            <div>兑换</div>
                                            <div v-html="'USDT:'+base.empty_b(item.number)"></div>
                                            <div v-html="base.formatDate(item.c_time)" style="width:50%"></div>
                                            
                                        </div>
                                </div>
                     </van-list>
                     </div>
                 </van-tab>
                <van-tab title="提现">
                  
                <div class="list">
                     <van-list    :finished="finished"  finished-text="没有更多了"   >
                         <div v-for="(item, index) in  withdrawal"  >
                                        <div class="list_row">
                                           
                                            <div >提现</div>
                              
                                            <div v-html="'USDT:'+base.empty_b(item.number)"></div>
                                            <div v-html="base.formatDate(item.c_time)" style="width:50%"></div>
                                           
                                        </div>
                                </div>
                     </van-list>
                     </div>
                    
                </van-tab>
              </van-tabs>
        </div>
        <div class="footer_placeholder" style="width:100%;height:3rem"></div>
        <div class="but_sty">
            <!-- <van-button type="default" name="exchange" to="/recharge_convert">兑换</van-button>
            <van-button type="default" name="transfer" to="/recharge_transfer_USDT">转账</van-button> -->
             <van-button type="default" name="exchange" @click='$toast({ message:"兑换暂未开放", position: "bottom" })'>兑换</van-button>
            <van-button type="default" name="transfer" @click='$toast({ message: "转账暂未开放", position: "bottom" })'>转账</van-button>
        </div>
     </div>


</template>

<script>

export default {

data() {
    return {
              active: 0,
              list: [],
              loading: false,
              finished: false,
              allAnnal:[],
              convert:[],
              withdrawal:[],
              recharge:[],
              price1:0,
              price2:0,


    }
},
mounted() { 


   var that=this;
    that.base.head_status(1)
   

 that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});

       that.axios_b.all([that.convertlist(), that.withdrawallist(),that.rechargelist(),that.show()])
        .then(that.axios_b.spread(function (acct, perms) {
              that.$toast.clear();
              that.box_header_set();
        }));



},

 methods: {
     box_header_set(){
         document.getElementsByClassName("van-tabs__content")[0].style.height=(document.getElementsByTagName("html")[0].offsetHeight-(document.getElementsByClassName("van-tabs__nav")[0].offsetHeight+document.getElementsByClassName("myPrice")[0].offsetHeight+document.getElementsByClassName("footer_placeholder")[0].offsetHeight+document.getElementsByClassName("footer_placeholder")[1].offsetHeight+20))+"px";
     },
        show(){
           let that=this;
      //type 1:小矿机，2中型矿机  3大矿机  4超级矿机 //ratio投资收益 cycle生命周期
         var data={token:JSON.parse(localStorage.userinfo).token}
                       that._API.getShouYe(data).then(res => {
                            if(res.code==200){
                                that.price1=res.data.USDT[0]
                                 that.price2=res.data.USDT[1]
                                  
                            }
                       //     that.$toast({ message: res.msg, position: "bottom" });
                        }).catch(err => {
                            console.log("err", err);
                        });
     },
    convertlist(){

    //      convertlist: query => post('api/Member/convertlist', query),  //兑换的接口

    // alluserlist: query => post('api/Member/alluserlist', query), // 全部记录接口
    // withdrawallist: query => post('api/Member/withdrawallist', query),// 提现记录
    // rechargelist: query => post('api/Member/rechargelist', query),  //充值记录
              let that=this;
               var data={token:JSON.parse(localStorage.userinfo).token}
              
                       that._API.convertlist(data).then(res => {
                            if(res.code==200){
                                 that.convert=res.data;
                            }
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
    },
      rechargelist(){

              let that=this;
               var data={token:JSON.parse(localStorage.userinfo).token}
              
                       that._API.rechargelist(data).then(res => {
                            if(res.code==200){
                                 that.recharge=res.data;
                            }
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
    },
       withdrawallist(){

              let that=this;
               var data={token:JSON.parse(localStorage.userinfo).token}
              
                       that._API.withdrawallist(data).then(res => {
                            if(res.code==200){
                                 that.withdrawal=res.data;
                            }
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
    },
    all_annal(){
         let that=this;


            var data={token:JSON.parse(localStorage.userinfo).token}
              
                       that._API.alluserlist(data).then(res => {
                            that.finished = true;
                            if(res.code==200){
                                 that.allAnnal=res.data;
                            }
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
              
    },
       onLoad() {
           let that=this;
                    // 异步更新数据
                    setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        that.list.push(that.list.length + 1);
                    }
                    console.log(1)
                    // 加载状态结束
                    that.loading = false;

                    // 数据全部加载完成
                    if (that.list.length >= 10) {
                        that.finished = true;
                    }
                    }, 500);
       }
       
     


}
}
</script>


<style lang="scss" scoped >

    /deep/.van-tabs__content{    overflow: scroll;}
    /deep/.van-hairline--bottom{    z-index: 1;position: fixed; width: 100%; background: #190147;   top: 0;}
    /deep/.van-tabs__nav{background-color: initial;}
    /deep/ .header *, /deep/.van-nav-bar .van-icon, /deep/.priceList .van-tab span,.but_sty span{color:white}
  
    .myPrice{margin: 1rem;background-color: #9E14FF;padding: 1rem;    border-radius: .3rem;}
    .myPrice>div{line-height: 2rem;}
    .myPrice [price]{text-align: center;line-height: 2rem;padding-bottom: 1rem;}
    .myPrice [price]>span:nth-child(1){    font-size: 1.5rem;}

     /deep/.priceList .van-tabs__line{background-color: #9E14FF;}

    .but_sty{display: flex;    position: fixed;    bottom: 1rem;    width: 100%;}
    .but_sty>button{flex:1;margin: 0rem 1rem;background-color: #831BFA;border: 0;border-radius: 3rem;}

    .list>div{margin: 1rem;}
    .list>div>div{line-height: 1.2rem;padding: 0.5rem 0;    border-bottom: 1px solid #5d5d5d;}
    .list div{font-size: 0.85rem}
    .list .list_row{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
    .list .list_row>div{ width: 25%;text-align: center}






       
</style>
